<template>
	<div class="myself-wrap">

		<div class="myself-header" @click="topersonal">
			<img class="img1" src="http://img0.imgtn.bdimg.com/it/u=4104068472,66854933&fm=214&gp=0.jpg"/>
			<div class="personal-info">
        <p>{{ name }}</p>
        <a class="phone" :href="'tel:' + this.phone">{{ phone }}</a>
      </div>
		</div>

    <div class="myself-content">
      <div class="title">
        <span class="icon1"></span>
        <span class="span1">订单</span>     
        <span class="span2" @click="getMyorders('全部订单', 0)">查看更多<span class="mores"></span></span> 
      </div>
      <div class="content">
        <div class="flex-content">
          <span @click="getMyorders('待付款', 1)">
            <span class="navbar1"></span>
            <p class="p-nav">待付款</p>
            <span class="span-num" v-show="(pay!=0)">{{ pay }}</span>
          </span>
          <span @click="getMyorders('待使用', 2)">
            <span class="navbar3"></span>
            <p class="p-nav">待使用</p>
            <span class="span-num" v-show="(use!=0)">{{ use }}</span>
          </span>
          <span @click="getMyorders('待评价', 3)">
            <span class="navbar4"></span>
            <p class="p-nav">待评价</p>
            <span class="span-num" v-show="(comment!=0)">{{ comment }}</span>
          </span>
          <span @click="getMyorders('待退款', 4)">
            <span class="navbar5"></span>
            <p class="p-nav">待退款</p>
            <span class="span-num" v-show="(wait!=0)">{{ wait }}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="fix"></div>
    <div class="slogan">把你的学车当成人生大事</div>
	</div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
    },
    data() {
      return {
        phone: window.localStorage.cphone,
        name: '',
        pay: 0,
        use: 0,
        comment: 0,
        wait: 0
      };
    },
    created() {
      if (window.localStorage.cphone) {
        this.$http.post('api/login/userinfo/', {mobile: window.localStorage.cphone}).then(response => {
          this.name = response.body.data.real_name;
        });
        this.$http.get('api/course/getorderlist/?moblie=' + window.localStorage.cphone).then((response) => {
          response = response.body;
          for (let i in response.data) {
            if (response.data[i].status === 'nonpay') {
              this.pay += 1;
            } else if (response.data[i].status === 'notused') {
              this.use += 1;
            } else if (response.data[i].status === 'notevaluate') {
              this.comment += 1;
            } else if (response.data[i].status === 'await') {
              this.wait += 1;
            }
          }
        });
      }
    },
    methods: {
      getMyorders(value, index) {
        this.$router.push({path: '/myorders/', query: {statu: value, code: index}});
      },
      topersonal() {
        this.$router.push({path: '/personal/'});
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
  .myself-wrap
    .myself-header
      height 100px
      background-color $bg-white
      width 100%
      border-1px($border)
      .img1
        width 50px
        height 50px
        border 1px solid $se-fn
        border-radius 5px
        margin-top 25px
        float left
        margin-left 17px
      .personal-info
        margin-left 15px
        display inline-block
        float left
        margin-top 28px
        font-size 16px
        .phone
          display inline-block
          font-size 14px
          color $se-fn
          width 20px
          line-height 20px
          margin-top 5px
    .myself-content
      background-color $bg-white
      min-height 40px
      width 100%
      margin-top 11px
    .title
      height 40px
      width 100%
      line-height 40px
      font-size 16px
      border-1px($border)
      .span1
        margin-left 5px
        font-size 16px
      .span2
        font-size 13px
        color $se-fn
        float right
      .icon1
        display inline-block
        float left
        margin-left 12.5px
        margin-top 12px
        bg-image('order')
        rectangle-icon(rgb(255,255,255),14px,16px)
      .mores
        display inline-block
        float right
        rectangle-icon(rgb(255,255,255),7px,13px)
        icon-image('right_arrow')
        margin-top 13px
        margin-left 10px
    .content
      height 100px
      width 100%
      border-1px($border)
      background-color $bg-white
      .flex-content
        height 100%
        font-size 11px
        display flex
        justify-content space-between
        margin-left 50px
        margin-right 50px
        -webkit-tap-highlight-color rgba(0,0,0,0)
      .navbar1
        display inline-block
        margin-top 20px
        bg-image('unpay_icon')
        rectangle-icon(rgb(255,255,255),31px,34px)
      .navbar2
        display inline-block
        margin-top 20px
        bg-image('confirm_icon')
        rectangle-icon(rgb(255,255,255),31px,34px)
      .navbar3
        display inline-block
        margin-top 20px
        bg-image('use_icon')
        rectangle-icon(rgb(255,255,255),31px,34px)
      .navbar4
        display inline-block
        margin-top 20px
        bg-image('comments_icon')
        rectangle-icon(rgb(255,255,255),33px,34px)
      .navbar5
        display inline-block
        margin-top 20px
        bg-image('refund_icon')
        rectangle-icon(rgb(255,255,255),34px,34px)
      .p-nav
        margin-top 6px
        width 36px
        margin-left -2px
        font-size 11px
      .span-num
        display inline-block
        width 13px
        height 12px
        float right
        background-color rgb(255,255,255)
        position relative
        margin-top -60px
        border-radius 50%
        border 1px solid $theme
        color $theme
        font-size 8px
        text-align center
        line-height 12px
    .fix
      height 80px
      width 100%
    .slogan
      text-align center
      font-size 15px
      color rgb(207,206,206)
      position fixed
      bottom 61px
      left 0px
      right 0px
</style>